import React, { useEffect, useState } from "react";
import { HomeListItem } from "../../components";
import logo from "../../logo.svg";
import axios from "axios";
import "./style.scss";
import { useNavigate } from "react-router-dom";
interface ListItem {
  title: string;
  url: string;
  id: string;
  price: string | number;
}

const Index = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const navigate = useNavigate()
  const getList = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    getList();
  }, []);
  return (
    <div className="list">
      {list.map((v) => {
        return (
          <HomeListItem
            key={v.id}
            title={v.title}
            id={v.id}
            price={v.price}
            url={v.url}
            onClick={ () => navigate('/detail/' + v.id) }
          ></HomeListItem>
        );
      })}
    </div>
  );
};

export default Index;
